<template>
  <div class="main-box">
    <el-card>
      <div class="title">
        <span>快捷入口</span>
      </div>
      <div class="api">
        <div>
          <router-link :to="{'path':'/cardList'}" class="el-button">
            <i class="iconfont icon-Language"></i>
            <span>卡片管理</span>
          </router-link>
        </div>
        <div>
          <router-link to="/ordersList" class="el-button">
            <i class="el-icon-sell"></i>
            <span>订单管理</span>
          </router-link>
        </div>
        <div>
          <router-link :to="{'path':'/administratorDetail','query':{'id':2}}" class="el-button">
            <i class="el-icon-user"></i>
            <span>我的信息</span>
          </router-link>
        </div>

      </div>
    </el-card>

    <el-card v-if="false">
       <div class="title">
          <span>销售数据</span>
        </div>
        <div class="api">
          <el-empty description="暂无数据"></el-empty>
        </div>
    </el-card>

    <div class="graphic" v-if="false"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      icon: [
        // {
        //   class: "iconfont icon-Copy",
        //   text: "订单内容"
        // },
        // {
        //   class: "iconfont icon-xingbienan",
        //   text: "权限操作"
        // }
      ]
    };
  },

  mounted() {

    var myChart = echarts.init(document.querySelector(".graphic"));
    // 绘制图表i 元素必须有高度
    myChart.setOption({
      title: {
        text: "销量报表"
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  },

  methods: {}
};
</script>


<style lang="less" scope>
.graphic {
  height: 450px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background-color: #ffffff;
  margin-top: 15px;
}
.title {
  border-bottom: 1px solid rgba(99, 99, 99, 0.3);
  padding-bottom: 15px;
}
.api {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;

  .el-button {
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    
    i {
      font-size: 40px;
      display: block;
      margin-bottom: 10px;
    }
  }
}
.el-card {
  margin-top: 15px;
}
</style>